<template>
    <div class="time-line" :style="'height:'+height">
        <div class="time-line-title">{{title ||'title'}}</div>
        <chart id="line" :option="option_column" :style="chartStyle"></chart>
    </div>
</template>

<script>
    let base = +new Date(2021, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let date = [];
    let testData = [Math.random() * 20];
    for (let i = 1; i < 20; i++) {
        var now = new Date((base += oneDay));
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
        testData.push(Math.round((Math.random() - 0.5) * 20 + testData[i - 1]));
    }
    const unit = {
        "air_temperature":'℃',
        "soil_temperature":'℃',
        "rainfall_sensor":"mm",
        "soil_moisture":"%",
        "wind_speed_sensor":"m/s",
        "illuminance_sensor":"h",
        "air_humidity":"%"
    }
    export default {
        name: "TimeLine",
        props:['title','height','lineData','type','dispersionData'],

        data() {
            return {
                chartStyle:{
                    width:'335px',
                    height: this.height || '200px',
                    position: 'absolute',
                    "margin-left": '35px'
                },
                option_column: {
                    grid: {
                        top: 30,
                        bottom:20,
                        right:24,
                    },
                    tooltip: {
                        trigger: 'axis',
                        valueFormatter: this.lineData?(value) => value+unit[this.type]:value => value+'mm'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [],
                        axisLabel: {
                            color: "#B0B0B0",
                            fontSize:'12px'
                        },
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#333333"
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            start: 0,
                            end: 10,
                            top: '0%',
                            height:'16px',
                            dataBackground: {
                                areaStyle: {
                                    color: "rgba(255,77,0,0.20)"
                                },
                                lineStyle: {
                                    color: "#F8733B"
                                }
                            },
                            selectedDataBackground: {
                                areaStyle: {
                                    color: "#F8733B"
                                }
                            },
                            handleStyle: {
                                color: "#121414",
                                borderColor: "1px solid rgba(77,77,77,1)"
                            },
                            borderColor: "rgba(77,77,77,1)",
                            moveHandleSize: 0,
                            fillerColor: "rgba(255,77,0,0.20)"
                        }
                    ],
                    series: [
                        {
                            name: this.title,
                            type: 'line',
                            symbol: 'none',
                            sampling: 'lttb',
                            lineStyle: {
                                width: 1,
                                type: "dashed"
                            },
                            itemStyle: {
                                color: "#F8733B"
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(248,115,59,.5)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(0,0,0,.5)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            data: []
                        }
                    ]
                },
            }
        },
        watch:{
            lineData(val){
                let date = []
                let resData = []
                val.attr.forEach(item=>{
                    date.push( new Date(item.time).toLocaleString().split(" ")[1]);
                    resData.push(item[this.type]/10)
                })
                this.option_column.xAxis.data = date
                this.option_column.series[0].data=resData
            },
            dispersionData(val){
                let date = []
                let resData = []
                console.log(this.type)
                val.forEach(item=>{
                    date.push( new Date(item.create_time).toLocaleString().split(" ")[1]);
                    resData.push(item[this.type])
                })
                this.option_column.xAxis.data = date
                this.option_column.series[0].data=resData
            }

        },
        methods:{

        }
    }
</script>

<style scoped lang="less">
.time-line{
    height: 200px;
    display: flex;
    .time-line-title{
        font-size: 12px;
        color: #F8733B;
        width: 60px;
        /*word-break: keep-all;*/
    }
}
</style>
